<script setup lang="ts">
let emit = defineEmits(["open"]);
</script>

<template>
  <div class="success">
    <div class="suc">&#xe607;</div>
    <p class="subSuc">提交成功</p>
    <p class="tips">请耐心等待处理结果</p>
    <button class="home" @click.stop="emit('open', '/')">返回首页</button>
    <button class="details">查看详情</button>
  </div>
</template>

<style scoped lang="scss">
.success {
  width: 211px;
  margin-top: 83px;
  display: grid;
  grid-template-rows: 70px repeat(3, auto);
  grid-template-columns: repeat(2, 1fr);
  gap: 0px 10px;
  place-items: center;
}

//这三个要跨列
.suc,
.subSuc,
.tips {
  grid-column: 1 / -1;
  -webkit-user-drag: none;
  user-select: none;
}

// 成功按钮
.suc {
  width: 70px;
  height: 70px;
  line-height: 70px;
  border-radius: 50%;
  text-align: center;
  background-color: #52c41a;
  color: #ffffff;
  font-size: 40px;
}
// 提交成功了
.subSuc {
  height: 20px;
  line-height: 20px;
  font-size: 20px;
  color: #333333;
  // margin: 24px 0px 10px;
  margin-top: 24px;
}
// 处理结果
.tips {
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #b0b4bd;
  margin-top: 10px;
}
button {
  width: 100px;
  height: 36px;
  background: #ffffff;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 24px;
  box-sizing: border-box;
  border: 1px solid transparent;
}

// 返回首页
.home {
  color: #2163e0;
  border-color: #2163e0;
}

// 查看详情
.details {
  color: #333333;
  border-color: #dcdfe6;
}
</style>
